<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        /*导航栏样式开始*/
        .div_head{
            padding: 0;
            position:fixed;
            width: 100%;
            height: 4rem;
            right: 0;
            top:0;
            background-color:white;
            z-index: 55;
        }
        #head_span{
            display: block;
            margin: 9px 70px 0 0 ;
        }
        #head_span>a{
            text-decoration: none;
            color: #909399;
            margin-left: 20px;
        }
        #head_span a:hover{
            color: rgb(145, 160, 208);
        }
        /*导航栏样式结束*/
        /*走马灯样式*/
        .el-carousel__container{
            position: relative;
            height: 600px;
            width: 2000px;
        }
        .el-card__body{
            padding:0px;
            overflow: hidden;
        }
        .el-main{
            padding:0px;
        }
        #main{
            padding:20px;
            width: 1400px;
            margin: 0 auto;
        }
        #main img{
            width:300px;
        }
        .div_card{
            width: 250px;
            height: 30px;
            float: right;
            background-color: rgba(255,255,255,0.5);
            color: rgb(29,56,136);
            border: solid 1px #cbcbef;
            position: absolute;
            margin: 0 0 10px 0;
            padding: 10px;
            bottom: 0;
            left: 8px;
            right: 0;
            font-size: 14px;
            text-align: center;
        }
        .div_card p{
            display: block;
            margin: 0 auto;
        }
        .p_card{
             color: #181616;
         }
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }
        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        /*当鼠标悬停时,改变商品图片*/
        .main_span{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition-duration: 1s;
        }
        .main_span:hover{
            opacity: 1;
            cursor: pointer;
            transform: scale(1.2);
            transition-duration: 1s;
        }
        #choiceness{
            width: 300px;
            height: 300px;
            transition-duration: 1s;
        }
        #choiceness:hover{
            transform: scale(1.5);
            transition-duration: 1s;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="div_head">
                <el-menu mode="horizontal" background-color="white"
                         text-color="color: rgb(29, 56, 136)" active-text-color="color: rgb(29, 56, 136)" style="width:1200px;margin: 0 auto">
                    <el-menu-item><img  height="50px" src="imgs/logo.png" alt=""></el-menu-item>
                    <el-menu-item index="1"><a href="index.html">首页</a></el-menu-item>
                    <el-menu-item index="2"><a href="商品列表.html">蛋糕</a></el-menu-item>
                    <el-menu-item index="3"><a href="商品列表.html">下午茶</a></el-menu-item>
                    <el-menu-item index="4"><a href="精选食材.html">精选食材</a></el-menu-item>
                    <el-menu-item index="5">最新活动</el-menu-item>
                    <el-menu-item index="6">企业专区</el-menu-item>
                    <el-menu-item index="6">会员中心</el-menu-item>
                    <div style="float: right;position: relative; top: 10px">
                <span id="head_span">
                <a href="">登录 </a> <a href=""> 注册</a>
                    <a href=""><i class="el-icon-s-goods" style="margin-left: 10px"></i></a>
                </span>

                    </div>
                </el-menu>
            </div>

        </el-header>

        <el-main style="margin: 0 auto">
            <!--图片轮播图-->
            <template>
                <el-carousel indicator-position="outside">
                    <el-carousel-item v-for="item in 5" :key="item">
                        <img :src="'imgs/轮播图'+item+'.jpg'" alt="" width="2000" height="600px">
                    </el-carousel-item>
                </el-carousel>
            </template>
            <!--轮播图结束-->
            <div id="main">
            <el-row gutter="20">
                <h2 style="color: rgb(29,56,136)"><span>人气推荐<i class="el-icon-trophy"></i></span> <a href="" style="float: right;text-decoration: none;font-size: 14px;color: rgb(29,56,136)">更多</a></h2>
                <el-col span="6" v-for="p of productArr.slice(0,4)"  >
                    <a href="detail.html">
                        <el-card shadow="hover" style="width: 300px;height: 300px;position: relative">
                                <!--<img :src="p.url" width="280" height="280" id="img-hover">-->
                            <img alt="" :src="p.url" /><span class="main_span"><img alt="" :src="p.url2" /></span>
                                <div class="div_card">
                                    <p class="p_card">{{p.title}}</p>
                                    <p>{{p.price}}</p>
                                </div>
                        </el-card>
                    </a>
                </el-col>
            </el-row>
                <el-row gutter="20">
                    <h2 style="color: rgb(29,56,136)"><i class="el-icon-collection-tag"></i><span>生日蛋糕</span> <a href="" style="float: right;text-decoration: none;font-size: 14px;color: rgb(29,56,136)">更多</a></h2>
                    <el-col span="6" v-for="p of productArr.slice(4,8)"  >
                        <a href="">
                            <el-card style="width: 300px;height: 300px;position: relative">
                                <!--<img :src="p.url" width="280" height="280" id="img-hover">-->
                                <img alt="" :src="p.url" /><span class="main_span"><img alt="" :src="p.url2" /></span>
                                <div class="div_card">
                                    <p class="p_card">{{p.title}}</p>
                                    <p>{{p.price}}</p>
                                </div>
                            </el-card>
                        </a>
                    </el-col>
                </el-row>
            <el-row gutter="20">
                <h2 style="color: rgb(29,56,136)"><span>咖啡下午茶<i class="el-icon-coffee-cup"></i></span> <a href="" style="float: right;text-decoration: none;font-size: 14px;color: rgb(29,56,136)">更多</a></h2>
                <el-col span="6" v-for="p of productArr.slice(8,12)"  >
                    <a href="">
                        <el-card style="width: 300px;height: 300px;position: relative">
                            <!--<img :src="p.url" width="280" height="280" id="img-hover">-->
                            <img alt="" :src="p.url" /><span class="main_span"><img alt="" :src="p.url2" /></span>
                            <div class="div_card">
                                <p class="p_card">{{p.title}}</p>
                                <p>{{p.price}}</p>
                            </div>
                        </el-card>
                    </a>
                </el-col>
            </el-row>
            <el-row gutter="20">
                <h2 style="color: rgb(29,56,136)"><span><i class="el-icon-dish"></i>精选食材</span> <a href="" style="float: right;text-decoration: none;font-size: 14px;color: rgb(29,56,136)">更多</a></h2>
                <el-col span="6" v-for="p of productArr.slice(12,16)"  >
                    <a href="">
                        <el-card style="width: 300px;height: 300px;position: relative; padding: 0">
                            <!--<img :src="p.url" width="280" height="280" id="img-hover">-->
                            <img id="choiceness" alt="" :src="p.url" />
                            <div class="div_card">
                                <p class="p_card">{{p.title}}</p>
                                <p>{{p.content}}</p>
                            </div>
                        </el-card>
                    </a>
                </el-col>
            </el-row>
            </div>
        </el-main>

        <el-footer>
            <div style="background-color: #282c30;color: #666666;text-align: center;padding: 50px 0">
                <p>有家蛋糕 提前3小时预订，北京市六环内免费配送 公司地址：北京市朝阳区798艺术区工美楼3层</p>
                <p>Copyright © 2009-2023 ebeecake有家蛋糕 有家（北京）食品有限公司 京ICP备09081733号-1 <img src="https://cdn.tmooc.cn/tmooc-web/css/img/beianh2019082901.png"> 京公网安备 11010802029572号</p>
                <p>公司电话：4006106798    食品经营许可证：JY11105110232865    食品生产许可证：SC12411051114584</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                productArr:[{url:"imgs/商品1.jpg",url2:"imgs/商品1-1.jpg",title:"生日快乐|草莓慕斯蛋糕",price:"￥335"},{url:"imgs/商品2.jpg",url2:"imgs/商品2-1.jpg",title:"恋香|香草冰激凌蛋糕",price:"￥265"},
                    {url:"imgs/商品3.jpg",url2:"imgs/商品3-1.jpg",title:"桃芝|樱桃芝士蛋糕",price:"￥265"}, {url:"imgs/商品4.jpg",url2:"imgs/商品4-1.jpg",title:"沉香|生椰拿铁慕斯蛋糕",price:"￥225"},
                    {url:"imgs/商品5.jpg",url2:"imgs/商品5-1.jpg",title:"水果|缤纷米蛋糕",price:"￥225"},{url:"imgs/商品6.jpg",url2:"imgs/商品6-1.jpg",title:"回归|90蛋糕",price:"￥225"},
                    {url:"imgs/商品7.jpg",url2:"imgs/商品7-1.jpg",title:"初心|牛油果蛋糕",price:"￥355"},{url:"imgs/商品8.jpg",url2:"imgs/商品8-1.jpg",title:"简单|蜂蜜蛋糕",price:"￥335"},
                    {url:"imgs/商品9.jpg",url2:"imgs/商品9-1.jpg",title:"梦龙巧克力榛子蛋糕卷",price:"¥45.8/250克"}, {url:"imgs/商品10.jpg",url2:"imgs/商品10-1.jpg",title:"奶油蛋糕卷",price:"¥45.8/300克"},
                    {url:"imgs/商品11.jpg",url2:"imgs/商品11-1.jpg",title:"巴斯克烤芝士蛋糕",price:"¥58.8.8/240克"},{url:"imgs/商品12.jpg",url2:"imgs/商品12-1.jpg",title:"新鲜牛乳蛋糕",price:"¥69.8/250克"},
                    {url:"imgs/精选食材1.jpg",title:"巧克力",content:"法国法芙娜巧克力"},{url:"imgs/精选食材2.jpg",title:"稀奶油",content:"法国铁塔稀奶油"},
                    {url:"imgs/精选食材3.jpg",title:"芝士",content:"新西兰安佳芝士"},{url:"imgs/精选食材4.jpg",title:"蜂蜜",content:"甜蜜密码-蜂蜜"}]

            }
        },
        methods:{
            /*图片转化方法*/
            changeImage(event, index) {
                event.target.src = this.productArr[(index + 3) % 6];
                event.target.addEventListener("mouseout", () => {
                    event.target.src = this.productArr[index];
                });
            }
        }
    })
</script>
</html>